<template>
    <el-table
      :data="data"
      style="width: 100%"
      v-loading="loading"
      stripe
      border
    >
    <el-table-column prop="deviceId" label="设备ID" width="100" align="center"></el-table-column>
    <el-table-column prop="deviceName" label="设备名称" width="150" align="center"></el-table-column>
    <el-table-column prop="description" label="预警描述" min-width="200" show-overflow-tooltip></el-table-column>
    <el-table-column label="预警等级" width="120" align="center">
      <template #default="{row}">
        <el-tag :type="getWarningLevelTagType(row.level)">
          {{ getWarningLevelText(row.level) }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="triggeredTime" label="触发时间" width="180" align="center"></el-table-column>
    <el-table-column v-if="type === 'resolved'" prop="resolvedTime" label="解决时间" width="180" align="center"></el-table-column>
    <el-table-column v-if="type === 'resolved'" label="解决人" width="120" align="center">
      <template #default="{row}">
        {{ row.resolverName || row.resolverId }}
      </template>
    </el-table-column>
      
      <el-table-column label="操作" width="220" align="center" fixed="right">
        <template #default="{row}">
          <el-button 
            type="primary" 
            size="small" 
            @click="handleResolve(row)"
            v-if="type === 'unresolved'"
          >
            解决
          </el-button>
          <el-button 
            type="info" 
            size="small" 
            @click="showDetail(row)"
          >
            详情
          </el-button>
          <el-button 
            type="warning" 
            size="small" 
            @click="handleEdit(row)"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- 详情对话框 -->
    <el-dialog v-model="showDetailDialog" :title="`预警详情 - ${currentDetail.deviceName || ''}`" width="60%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备ID">{{ currentDetail.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ currentDetail.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="预警等级">
          <el-tag :type="getWarningLevelTagType(currentDetail.level)">
            {{ getWarningLevelText(currentDetail.level) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="触发时间">{{ currentDetail.triggeredTime }}</el-descriptions-item>
        <el-descriptions-item label="解决时间" v-if="currentDetail.resolvedTime">{{ currentDetail.resolvedTime }}</el-descriptions-item>
        <el-descriptions-item label="解决人" v-if="currentDetail.resolverName">{{ currentDetail.resolverName }}</el-descriptions-item>
        <el-descriptions-item label="预警描述" :span="2">
          <div style="white-space: pre-line;">{{ currentDetail.description }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="解决方案" :span="2" v-if="currentDetail.solution">
          <div style="white-space: pre-line;">{{ currentDetail.solution }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  
    <!-- 编辑对话框 -->
    <el-dialog v-model="showEditDialog" :title="`编辑预警 - ${currentEdit.deviceName || ''}`" width="50%">
      <el-form :model="currentEdit" label-width="100px">
        <el-form-item label="预警等级">
          <el-radio-group v-model="currentEdit.level">
            <el-radio-button :label="1">低</el-radio-button>
            <el-radio-button :label="2">中</el-radio-button>
            <el-radio-button :label="3">高</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="预警描述">
          <el-input 
            v-model="currentEdit.description" 
            type="textarea" 
            :rows="5"
            placeholder="请输入预警描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">保存</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { ref, defineProps, defineEmits } from 'vue'
  import { ElMessage } from 'element-plus'
  import { updateWarning } from '@/api/warningAndRepair'
  
  // 原有props和emit保持不变...
  const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'unresolved' // 'unresolved' | 'resolved'
  }
})

const emit = defineEmits(['resolve'])

// 预警等级文本
const getWarningLevelText = (level: number) => {
  const levelMap = {
    1: '低',
    2: '中',
    3: '高'
  }
  return levelMap[level] || '未知'
}

// 预警等级标签类型
const getWarningLevelTagType = (level: number) => {
  const typeMap = {
    1: 'success',
    2: 'warning',
    3: 'danger'
  }
  return typeMap[level] || ''
}

// 解决预警
const handleResolve = (row: any) => {
  emit('resolve', row.id)
}
  const showDetailDialog = ref(false)
  const showEditDialog = ref(false)
  const currentDetail = ref<any>({})
  const currentEdit = ref<any>({})
  
  // 显示详情
  const showDetail = (row: any) => {
    currentDetail.value = { ...row }
    showDetailDialog.value = true
  }
  
  // 编辑记录
  const handleEdit = (row: any) => {
    currentEdit.value = { ...row }
    showEditDialog.value = true
  }
  
  // 确认编辑
  const confirmEdit = async () => {
    try {
      await updateWarning(currentEdit.value)
      ElMessage.success('修改成功')
      showEditDialog.value = false
      emit('update')
    } catch (error) {
      ElMessage.error('修改失败')
    }
  }
  </script>